<template>
  <div>
    <div v-if="mainReward.equityList && mainReward.equityList.memberEquityList && mainReward.sendEquityStatus">
      <div
        class="c-flex-row c-aligni-center c-p reward_item c-br12 c-mb20"
        v-for="(item, index) in mainReward.equityList.memberEquityList"
        :key="index"
      >
        <div class="c-ww180 c-hh120">
          <img
            v-if="item.type == 5"
            class="c-w100 c-h c-object-fit-c"
            :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_vip.png'))"
            alt=""
          >
          <img
            v-else
            class="c-w100 c-h c-object-fit-c"
            :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_svip.png'))"
            alt=""
          >
        </div>
        <div class="c-flex-grow1 c-w0 c-ml14 c-pr20">
          <p class="c-fs26 c-fc-sblack c-fw600 c-text-ellipsis1">{{(item.type==5?'VIP':'SVIP')+item.effectiveTime+'天体验卡'}}</p>
        </div>
        <div class="c-opacity40 c-fs100 iconfont c-fc-FF300C c-pa c-p-r0" v-if="mainReward.getStatus == 1">&#xe643;</div>
      </div>
    </div>
    <div
      class="c-flex-row c-aligni-center c-p reward_item c-br12 c-mb20"
      v-if="mainReward.integral && mainReward.sendIntegralStatus"
    >
      <div class="c-ww180 c-hh120">
        <!-- 积分 -->
        <img
          class="c-w100 c-h c-object-fit-c"
          :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_integral.png'))"
          alt=""
        >
      </div>
      <div class="c-flex-grow1 c-w0 c-ml14 c-pr20">
        <p class="c-fs26 c-fc-sblack c-fw600 c-text-ellipsis1">{{'奖励'+ mainReward.integral + customPointName}}</p>
      </div>
      <div class="c-opacity40 c-fs100 iconfont c-fc-FF300C c-pa c-p-r0" v-if="mainReward.getStatus == 1">&#xe643;</div>
    </div>
    <template v-if="mainReward.discountList && mainReward.discountList.length>0 && mainReward.sendDiscountStatus">
      <div
        class="c-flex-row c-aligni-center c-p reward_item c-br12 c-mb20"
        v-for="(item, index) in mainReward.discountList"
        :key="index"
      >
        <div class="c-ww180 c-hh120">
          <!-- 优惠卷 -->
          <img
            class="c-w100 c-h c-object-fit-c"
            :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_coupon.png'))"
            alt=""
          >
        </div>
        <div class="c-flex-grow1 c-w0 c-ml14 c-pr20">
          <p class="c-fs26 c-fc-sblack c-fw600 c-text-ellipsis1">{{item.name}}</p>
        </div>
        <div class="c-opacity40 c-fs100 iconfont c-fc-FF300C c-pa c-p-r0" v-if="mainReward.getStatus == 1">&#xe643;</div>
        <div class="c-opacity40 c-fs100 iconfont icon-yidashangxian c-fc-FF300C c-pa c-p-r0" v-if="item.isFail == 1"></div>
      </div>
    </template>
    <div
      class="c-flex-row c-aligni-center c-p reward_item c-br12 c-mb20"
      v-if="mainReward.equityList && mainReward.equityList.familyCard && mainReward.sendEquityStatus"
    >
      <div class="c-ww180 c-hh120">
        <!-- 亲情卡 -->
        <img
          class="c-w100 c-h c-object-fit-c"
          :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_card.png'))"
          alt=""
        >
      </div>
      <div class="c-flex-grow1 c-w0 c-ml14 c-pr20">
        <p class="c-fs26 c-fc-sblack c-fw600 c-text-ellipsis1">亲情卡</p>
      </div>
      <div class="c-opacity40 c-fs100 iconfont c-fc-FF300C c-pa c-p-r0" v-if="mainReward.getStatus == 1">&#xe643;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecommendReward',
  props: {
    mainReward: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
    }
  }
}
</script>

<style lang="less" scoped>
.c-fc-FF4323 {
  color: #FF4323;
}
.c-fc-FF300C {
  color: #FF300C;
}
.c-fc-FF2F0B {
  color: #FF2F0B;
}
.c-fc-F4223B {
  color: #F4223B;
}
.reward_item {
	background: #FFE8E5;
	.reward_unclaimed {
		background: #FF4323;
	}
}
</style>